<template>
    <div>
        <div>
            <el-button type="primary" @click="link">关联企业</el-button>
        </div>

        <div style="display:flex;margin-top: 10px;">
            <el-tree :data="data" show-checkbox @node-click="handleNodeClick" :expand-on-click-node="false"
                style="width:30%;">
                <span class="tree-node" slot-scope="{data}">
                    <span>{{ data.abbreviated }}</span>
                </span>
            </el-tree>

            <el-form v-if="formtree" :model="ruleForm" ref="ruleForm" :rules="rules" label-width="110px"
                class="demo-ruleForm" style="width:60%;margin-left: 5%;" disabled>
                <el-form-item label="企业名称：" prop="companyName">
                    <el-input type="text" v-model="ruleForm.companyName">
                    </el-input>
                </el-form-item>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="企业简称：" prop="abbreviated">
                            <el-input type="text" v-model="ruleForm.abbreviated">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="法人：" prop="corporate">
                            <el-input type="text" v-model="ruleForm.corporate">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="办公电话：" prop="phone">
                            <el-input type="text" v-model="ruleForm.phone">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="办公地址：" prop="address">
                            <el-input type="text" v-model="ruleForm.address">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="信用代码：" prop="creditCode">
                            <el-input type="text" v-model="ruleForm.creditCode">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="单位联系人：" prop="contact">
                            <el-input type="text" v-model="ruleForm.contact">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="电子邮箱：" prop="email">
                            <el-input type="text" v-model="ruleForm.email">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="微信号：" prop="wechat">
                            <el-input type="text" v-model="ruleForm.wechat">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="企业类型：" prop="type">
                    <el-radio v-if="ruleForm.type == '母公司'" v-model="ruleForm.type" label="母公司" disabled></el-radio>
                    <el-radio v-if="ruleForm.type == '子公司'" v-model="ruleForm.type" label="子公司" disabled></el-radio>
                    <el-radio v-if="ruleForm.type == '分公司'" v-model="ruleForm.type" label="分公司" disabled></el-radio>
                    <el-button type="text" class="pull-right" @click="getdrawer" :disabled="false">查看资质证书 ></el-button>
                </el-form-item>
                <el-row :gutter="24">
                    <el-col :span="8">
                        <el-form-item label="公众号：" prop="officialAccount">
                            <img v-if="accountUrl" :src="accountUrl" class="avatar">
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="公章：" prop="officialSeal" class="item">
                            <img v-if="sealUrl" :src="sealUrl" class="avatar">
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="logo：" prop="logo" class="item">
                            <img v-if="logoUrl" :src="logoUrl" class="avatar">
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-drawer title="资质证书" ref="drawer" :visible.sync="drawer" direction="rtl" size="30%">
            <el-form :model="zsForm" ref="zsForm" class="demo-formFileds">
                <el-form-item label="营业执照：" prop="yyzz">
                    <el-upload :action="yyzzactionurl" list-type="picture-card" :on-preview="handlePictureCardPreview"
                        :limit="1" :file-list="fileList1" :class="{ hide_box1: true }">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="资质证明：">
                    <el-upload :action="zzzmactionurl" list-type="picture-card" :on-preview="handlePictureCardPreview"
                        :file-list="fileList2" :class="{ hide_box2: true }" :limit="2">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogClose" class="pull-right">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
        <el-dialog :visible.sync="dialogVisible" width="50%">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <!-- 弹出层 -->
        <Link ref="linkRef" v-if="linkShow" :linkShow="linkShow" :record="record" :linkData="linkData"
            @dialogClose="dialogClose">
        </Link>
    </div>
</template>

<script>
import Link from "./link.vue";
import { selectByUserId, correlationId } from "@/api/systemManage/enterpriseMaage";

export default {
    name: "enterprise",
    components: {
        Link,
    },
    data () {
        return {
            drawer: false,
            dialogImageUrl: '',
            dialogVisible: false,
            fileList1: [],
            fileList2: [],
            zsForm: {},
            yyzzactionurl: '',
            zzzmactionurl: '',

            data: [],
            ruleForm: {},
            rules:{},
            linkData: [],
            accountUrl: '',
            logoUrl: '',
            sealUrl: '',
            formtree: false,
            linkShow: false,
            record: ''
        }
    },
    methods: {
        handleNodeClick (data) {
            this.formtree = true
            this.ruleForm = data
            this.logoUrl = this.ruleForm.logo
            this.sealUrl = this.ruleForm.officialSeal
            this.accountUrl = this.ruleForm.officialAccount
        },
        dialogClose () {
            this.linkShow = false;
            this.drawer = false;
        },
        link () {
            let params = localStorage.getItem('userId')
            correlationId('userId=' + params).then((res) => {
                if (res.data) {
                    this.record = res.data
                    this.linkShow = true
                } else {
                    // this.linkData = this.data
                    this.linkShow = true
                }
            })
        },
        golist () {
            let params = localStorage.getItem('userId')
            selectByUserId('userId=' + params).then((res) => {
                this.data = res.data
                this.dataless = this.data
            })
        },
        getdrawer () {
            this.zsForm = this.ruleForm
            this.fileList1 = []
            this.fileList2 = []
            this.getTheDrawer()
        },
        getTheDrawer () {
            this.drawer = true
            if (this.zsForm.yyzz) {
                this.fileList1.push({})
                this.fileList1[0].url = this.zsForm.yyzz
                this.upload_btn1 = true
            }
            if (this.zsForm.zzzm) {
                this.fileList2.push({})
                this.fileList2[0].url = this.zsForm.zzzm
            }
            if (this.zsForm.zzzm2) {
                this.fileList2.push({})
                this.fileList2[1].url = this.zsForm.zzzm2
                this.upload_btn2 = true
            }
        },
        handlePictureCardPreview (file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
    },
    mounted () {
        this.golist();
    }
}
</script>

<style scoped lang="less">
.el-form {
    padding: 0 10px;
}

.el-date-editor {
    width: 100% !important;
}

.tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    padding-right: 8px;
}

:deep .el-tree-node__content {
    height: 35px;
}

:deep .el-input.is-disabled .el-input__inner {
    background-color: #fff;
    border-color: #e4e7ed;
    color: #606266;
    cursor: not-allowed;
}

:deep .el-form-item__label {
    position: relative;
    display: inline-block;
    text-align-last: justify;
}

:deep .item .el-form-item__label {
    text-align-last: right;
}

:deep .el-form-item--medium .el-form-item__label::before {
    display: none;
}

.avatar {
    width: 146px;
    height: 146px;
    object-fit: contain;
    display: block;
}
/deep/.el-drawer__header {
    background-color: #2EB3FF;
    align-items: center;
    color: #fff;
    height: 60px;
    margin-bottom: 15px;
    font-weight: bold;

}

:deep .el-dialog__header {
    display: none;
}

.hide_box1 /deep/ .el-upload--picture-card {
    display: none;
}

.hide_box2 /deep/ .el-upload--picture-card {
    display: none;
}
// /deep/ .el-upload-list__item-delete{
//     display: none;
// }
/deep/ .el-upload-list--picture-card .el-upload-list__item-actions span{
    display: block;
    text-align: center;
    line-height: 148px;
    width: 148px;
}
/deep/ [class^="el-icon-delete"], [class*=" el-icon-delete"]{
    display: none;
}
</style>